<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.js"></script>
    <!-- vue的引入放在前面 -->
</head>

<body>
    <div id="app">
        {{ message }}
        <h3>数字{{num}}</h3>
        <div><button @click="add(10)">加法</button></div>
    </div>
</body>
<script>
    var app = new Vue({ //new  表示构造函数  既然是函数  就可以执行
        //函数怎么执行  （）  （）里面放的是参数  参数很多可以放到一个对象里面去
        //对象里面放的 键值对 前面是属性名称：后面的是属性对应的值
        el: '#app',//el：表示元素  vue的作用范围
        data: {//data:表示数据   vue作用范围内可以渲染的数据 {{里面放属性名称}}
            message:'Hello Vue!',
            num:100
        },
        //声明式渲染 和数据驱动
        methods:{  //数据修改的方法在methods里面 记得要加s  因为方法会有很多
            add(n){
                // alert("+"+n);
                //this 指向vue的实例   可以直接调用里面的数据和方法
                // alert(this.$data.num)
                //alert(this.num);  //内部进行了封装  data可以省略

                this.num  = this.num+n;//100+10  当数据发生改变以后 （数据重新赋值）
                //页面会自动更新 
            }

        }
    })



</script>

</html>